import React from 'react';
import { Button, Form, Input, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import './hiddenDangerRepair.less';

import bug1 from '../imgs/bug1.jpg'
import bug2 from '../imgs/bug2.jpg'
import bug3 from '../imgs/bug3.jpg'

interface HiddenDangerInfo {
  projectName: string;
  hiddenType: string;
  discoverer: string;
  discoveryTime: string;
  description: string;
  relatedEquipment: string;
  photos: string[];
  remark: string;
  assignedPerson: string;
  planCompletionTime: string;
  status: string;
}

const HiddenDangerRepairResult: React.FC = () => {
  const [form] = Form.useForm();

  const hiddenDangerInfo: HiddenDangerInfo = {
    projectName: '知恩塔机塔',
    hiddenType: '日常巡查',
    discoverer: '顾齐',
    discoveryTime: '2024-02-10',
    description: '一号机/五号机相邻塔机办公室外线缆外露，办公楼大厅外线缆外露',
    relatedEquipment: '--',
    photos: [
      bug1,
      bug2,
      bug3,
    ],
    remark: '--',
    assignedPerson: '王明',
    planCompletionTime: '2024-02-10',
    status: '待处理'
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      console.log('提交的维修结果:', values);
      message.success('提交成功');
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  const handleBack = () => {
    window.history.back();
  };

  const uploadProps = {
    name: 'file',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <div className="hidden-danger-repair-result">
      <div className="page-header">
        <div className="title-section">
          <div className="arrow-title">隐患信息</div>
          <div className="repair-result">上报维修结果</div>
        </div>
        <Button onClick={handleBack}>返回</Button>
      </div>

      <div className="info-section">
        <div className="info-row">
          <div className="info-item">
            <span className="label">工程名称：</span>
            <span className="value">{hiddenDangerInfo.projectName}</span>
          </div>
          <div className="info-item">
            <span className="label">隐患类型：</span>
            <span className="value">{hiddenDangerInfo.hiddenType}</span>
          </div>
        </div>
        <div className="info-row">
          <div className="info-item">
            <span className="label">发现人：</span>
            <span className="value">{hiddenDangerInfo.discoverer}</span>
          </div>
          <div className="info-item">
            <span className="label">发现时间：</span>
            <span className="value">{hiddenDangerInfo.discoveryTime}</span>
          </div>
        </div>
        <div className="info-row">
          <div className="info-item full-width">
            <span className="label">隐患描述：</span>
            <span className="value">{hiddenDangerInfo.description}</span>
          </div>
        </div>
        <div className="info-row">
          <div className="info-item full-width">
            <span className="label">关联设备：</span>
            <span className="value">{hiddenDangerInfo.relatedEquipment}</span>
          </div>
        </div>
        <div className="info-row">
          <div className="info-item full-width">
            <span className="label">隐患照片：</span>
            <div className="photo-list">
              {hiddenDangerInfo.photos.map((photo, index) => (
                <div key={index} className="photo-item">
                  <img src={photo} alt={`隐患照片${index + 1}`} />
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="info-row">
          <div className="info-item full-width">
            <span className="label">备注：</span>
            <span className="value">{hiddenDangerInfo.remark}</span>
          </div>
        </div>
      </div>

      <Form form={form} layout="vertical" className="repair-form">
        <Form.Item
          label="维修结果描述"
          name="repairDescription"
          rules={[{ required: true, message: '请输入维修结果描述' }]}
        >
          <Input.TextArea rows={4} placeholder="请输入维修结果描述" />
        </Form.Item>

        <Form.Item
          label="维修结果照片"
          name="repairPhotos"
          rules={[{ required: true, message: '请上传维修结果照片' }]}
        >
          <Upload {...uploadProps} listType="picture">
            <Button icon={<UploadOutlined />}>上传照片</Button>
          </Upload>
        </Form.Item>

        <div className="form-actions">
          <Button type="primary" onClick={handleSubmit}>发起维修</Button>
          <Button type="primary" onClick={handleSubmit}>发起养护</Button>
        </div>
      </Form>
    </div>
  );
};

export default HiddenDangerRepairResult;
